<template>
  <div class="home">
    <!-- 搜索弹出层 -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
    <!-- 黑色遮罩层 -->
    <transition name="van-fade">
      <div class="ya" v-show="isshow"></div>
    </transition>
    <transition name="van-fade"
      >
      <div v-show="$route.path === '/home'">
        <!-- 首页顶部搜索栏 -->
        <van-search
          v-model="searchval"
          shape="round"
          disabled
          placeholder="请输入搜索关键词"
          @click="searchClick"
        />
        <!-- 首页banner 轮播图 -->
        <van-swipe :autoplay="2000" indicator-color="red">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img :src="item.image_url" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <!-- 首页导航图标 -->
        <van-grid :column-num="5">
          <van-grid-item
            v-for="value in channel"
            :key="value.id"
            :icon="value.icon_url"
            :text="value.name"
          />
        </van-grid>
        <!-- 首页 品牌制造商直供 -->
        <div class="brank">
          <div class="home_title">品牌制造商直供</div>
          <ul>
            <li v-for="item in brandList" :key="item.id">
              <img :src="item.pic_url" alt="" />
              <h4>{{ item.name }}</h4>
              <p>{{ "￥" + item.floor_price.toFixed(2) + "元" }}</p>
            </li>
          </ul>
        </div>
        <!-- 新品首发 -->
        <div class="pod">
          <h4>周一周四·新品首发</h4>
          <ul class="product_list">
            <li v-for="item in newGoodsList" :key="item.id">
              <img :src="item.list_pic_url" alt="" width="100%" />
              <div>{{ item.name }}</div>
              <div>{{ "￥" + item.retail_price.toFixed(2) + "元" }}</div>
            </li>
          </ul>
        </div>
        <!-- 人气推荐 -->
        <div class="recommend">
          <div class="ban1">人气推荐</div>
          <van-card
            v-for="item in hotGoodsList"
            :key="item.id"
            :price="item.retail_price.toFixed(2) + '元'"
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url"
          />
        </div>
        <!-- 专题精选 -->
        <div class="zhuanti">
          <div class="title">专题精选</div>
          <van-swipe :loop="false" :width="300">
            <van-swipe-item v-for="item in topicList" :key="item.title"
              ><img :src="item.scene_pic_url" alt="" />
              <h2>
                {{ item.title
                }}<span>"￥" {{ item.price_info.toFixed(2) }} "元"</span>
              </h2>
              <p>{{ item.subtitle }}</p>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 列表 -->
        <div class="lbshows">
          <div v-for="item in categoryList" :key="item.id" class="lbshow">
            <h2>{{ item.name }}</h2>
            <Products :goodsList="item.goodsList"></Products>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Products from "../components/Products";
import { GetHomeLists } from "@/request/api";
export default {
  name: "Home",
  data() {
    return {
      searchval: "", // 添加这个value否则报错
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
      goodsList: [],
    };
  },
  computed: {
    ...mapState({ isshow: (state) => state.isshow.isshow }),
  },
  methods: {
    ...mapMutations({ chenIsshow: "isshow/chenIsshow" }),
    searchClick() {
      this.$router.push("/home/searchpopup");
      this.chenIsshow(true);
    },
  },
  created() {
    GetHomeLists().then((res) => {
      console.log(res.data);
      let {
        banner,
        channel,
        brandList,
        newGoodsList,
        hotGoodsList,
        topicList,
        categoryList,
      } = res.data;
      //轮播图
      this.banner = banner;
      //图标导航
      this.channel = channel;
      //品牌制造商直供
      this.brandList = brandList;
      //新品首发
      this.newGoodsList = newGoodsList;
      //人气推介
      this.hotGoodsList = hotGoodsList;
      //专题精选
      this.topicList = topicList;
      //列表展示
      this.categoryList = categoryList;
    });
  },
  components: { Products },
};
</script>
<style lang="less">
//滑出
// .van-slide-right-enter,
// .van-slide-right-leave-to {
//   right: -100%;
// }
// .van-slide-right-enter-active,
// .van-slide-right-leave-active {
//   transition: all 0.2s linner;
// }
// .van-slide-right-enter-to,
// .van-slide-right-leave {
//   right: 0;
// }
//黑色遮罩层
.Popupshow {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 98;
}
//商品直供
.brank {
  background-color: #fff;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 49%;
      position: relative;
      img {
        width: 100%;
      }
      h4 {
        position: absolute;
        top: 0.1rem;
        left: 0.1rem;
      }
      p {
        position: absolute;
        top: 0.4rem;
        left: 0.1rem;
        color: #8b0000;
      }
    }
  }
}
.home_title {
  text-align: center;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.2rem;
}
//新品首发
.pod {
  background-color: #fff;
  h4 {
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.18rem;
  }
  .product_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    li {
      width: 49%;
      text-align: center;
      margin-bottom: 10px;
      padding-bottom: 10px;

      div {
        &:nth-of-type(2) {
          color: darkred;
          margin-top: 0.05rem;
        }
      }
    }
  }
}
//人气推荐
.recommend {
  margin-top: 0.2rem;
  background-color: #fff;
  .ban1 {
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
  }
  .van-card {
    box-sizing: border-box;
    padding: 8px 16px;
    color: #323233;
    font-size: 12px;
    background-color: #fafafa;
    height: 104px;
    .van-card__title {
      max-height: 32px;
      font-weight: 500;
      line-height: 29px;
      font-size: 18px;
    }
    .van-card__desc {
      height: 40px;
      max-height: 100px;
      line-height: 40px;
    }
    .van-card__price {
      line-height: 20px;
      color: #8d0000;
      .van-card__price-integer {
        padding-left: 0.05rem;
      }
    }
  }
}
//专题精选
.zhuanti {
  margin-top: 0.2rem;
  background-color: #fff;
  padding: 0 8px;
  .title {
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
  }
  .van-swipe-item {
    padding-bottom: 10px;
    margin-right: 15px;
    img {
      width: 100%;
      height: 2rem;
    }
    h2 {
      line-height: 40px;
      font-size: 16px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
      span {
        color: darkred;
      }
    }
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
    }
  }
  .van-swipe__indicators {
    display: none;
  }
}
//列表
.lbshows {
  margin-top: 0.2rem;
  background-color: #fff;
  .lbshow {
    background: #fff;
    padding-top: 18px;
    h2 {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
    }
  }
}
</style>